﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>jQuery Feedback Badge Demo</title>

    <link href="feedbackBadge.css" rel="stylesheet" type="text/css" />



    <link href="Widget-default.css" rel="stylesheet" type="text/css" />



    <script src="../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/Widget-default.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.feedbackBadge.min.js" type="text/javascript"></script>
    </head>
    <body>
<h1>jQuery Feedback Badge Demo</h1>

<h2>How To</h2>



<ol>
<li>Include the feedbackBadge.css style</li>
<li>Include the feedbackBadge.min.js file</li>
<li>Include the element in your page footer (before you body closing tag) that you want to transform in to a badge. I recomend it to be a HTML link to have the link pointing to the form even if the client has the Javascript disabled.
(ex. &lt;a href=&quot;feedback_form.html&quot; title=&quot;Give us feedback&quot; id=&quot;feedback-badge&quot;&gt;&lt;span&gt;Feedback&lt;/span&gt;&lt;/a&gt;)</li>
<li>Activate the plug-in: $('#feedback-badge').feedbackBadge();</li>
</ol>

<h2>Options</h2>

<dl>
<dt><b>css3Safe</b> (false):</dt>
<dd>
Activates the safe mode. Sometimes on Webkit browsers (especialy the older versions of Safari) the static position of the badge is affected by other CSS3 styles.
This makes the page scroll slow. This option will automatically activate the <b>onscroll</b> event of the window and recalculate the badge position when the client scrolls.
I recommend to activate this option on the Webkit browsers only (ex. css3Safe: $.browser.safari ? true : false).
</dd>
<dt><b>animate</b> (false):</dt>
<dd>
Works only if you set the <b>css3Safe</b> option to <b>true</b>.
It will assign a simple animation to the badge while scrolling.
</dd>
<dt><b>css</b>:</dt>
<dd>
An object with the actual styling of the badge.
</dd>
<dt><b>onClick</b>:</dt>
<dd>
A default function that will be triggered on mouse click event of the badge.
</dd>
</dl>

<h2>Implementation</h2>

<h3>Very simple example</h3>

<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function () {
$('#feedback-badge').feedbackBadge({
css3Safe: $.browser.safari ? true : false,
onClick: function () {alert('Do magic here!');return false;}
});
});
&lt;/script&gt;
</pre>


<h3>No animation example</h3>

<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function () {
/**
* Set up feedback box
*/
$('#feedback-badge').feedbackBadge({
css3Safe: $.browser.safari ? true : false, //this trick prevents old safari browser versions to scroll properly
onClick: function () {
// Do your magic in here when you click the badge
// Now I just show a simple popup, you could use the jQuery UI dialog
var div = $('&lt;div id=&quot;popup&quot;&gt;&lt;/div&gt;');
div.load('feedback_form.html', function () {$(window).scroll();});
$('body').prepend(div);

//After ataching the popup to the dom - load the form by ajax
$('#feedback-form').live('submit', function () {
//Do your magic in here when the form submit button is clicked
alert('Magic!');
return false;
});
$('#close-bt').live('click', function () {
//Do your magic in here when the form cancel button is clicked
div.remove();
});
return false;
}
});
});
&lt;/script&gt;
</pre>

<h3>Animation example</h3>

<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function () {
/**
* Set up feedback box
*/
$('#feedback-badge').feedbackBadge({
css3Safe: true, //enable this to get animation on scroll
animate: true, //enable the animation
onClick: function () {
// Do your magic in here when you click the badge
// Now I just show a simple popup, you could use the jQuery UI dialog
var div = $('&lt;div id=&quot;popup&quot;&gt;&lt;/div&gt;');
div.load('feedback_form.html', function () {$(window).scroll();});
$('body').prepend(div);

//After ataching the popup to the dom - load the form by ajax
$('#feedback-form').live('submit', function () {
//Do your magic in here when the form submit button is clicked
alert('Magic!');
return false;
});
$('#close-bt').live('click', function () {
//Do your magic in here when the form cancel button is clicked
div.remove();
});
return false;
}
});
});
&lt;/script&gt;
</pre>

<h3>Display the badge to the right</h3>

<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function () {
/**
* Set up feedback box to go to the right
*/
$('#feedback-badge').feedbackBadge({
css3Safe: $.browser.safari ? true : false, //this trick prevents old safari browser versions to scroll properly
float: 'right' //Add this to float the badge to the right
});
});
&lt;/script&gt;
</pre>

<h3>About the form popup</h3>

<p>The form container was implemented for the sake of the example but you can use it in your project anyway. If you want a more advanced popup you can use <a href="http://dumitruglavan.com/jquery-doom-windows-plugin-simple-javascript-dialogs/" target="_blank">Doom Windows plugin</a>.</p>

<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
// This centers current form popup
$(window).scroll(function () {
var topMargin = ($(window).height() - $('#popup').height())/2 + $(window).scrollTop();
$('#popup').css('margin-top', topMargin);
});
&lt;/script&quot;&gt;
</pre>

<a href="feedback_form.html" title="Give us feedback" id="feedback-badge"><span>Feedback</span></a>
<a href="feedback_form.html" title="Give us feedback" id="feedback-badge-right"><span>Feedback</span></a>

<script type="text/javascript">
$(document).ready(function () {
/**
* Set up feedback box on left side
*/
$('#feedback-badge').feedbackBadge({
css3Safe: $.browser.safari ? true : false, //this trick prevents old safari browser versions to scroll properly
onClick: function () {
// Do your magic in here when you click the badge
// Now I just show a simple popup, you could use the jQuery UI dialog
var div = $('<div id="popup"></div>');
div.load('feedback_form.html', function () {$(window).scroll();});
$('body').prepend(div);

//After ataching the popup to the dom - load the form by ajax
$('#feedback-form').live('submit', function () {
//Do your magic in here when the form submit button is clicked
alert('Magic!');
return false;
});
$('#close-bt').live('click', function () {
//Do your magic in here when the form cancel button is clicked
div.remove();
});
return false;
}
});

/**
* Set up feedback box on right side
*/
$('#feedback-badge-right').feedbackBadge({
css3Safe: $.browser.safari ? true : false, //this trick prevents old safari browser versions to scroll properly
float: 'right',
onClick: function () {
// Do your magic in here when you click the badge
// Now I just show a simple popup, you could use the jQuery UI dialog
var div = $('<div id="popup"></div>');
div.load('feedback_form.html', function () {$(window).scroll();});
$('body').prepend(div);

//After ataching the popup to the dom - load the form by ajax
$('#feedback-form').live('submit', function () {
//Do your magic in here when the form submit button is clicked
alert('Magic!');
return false;
});
$('#close-bt').live('click', function () {
//Do your magic in here when the form cancel button is clicked
div.remove();
});
return false;
}
});
$(window).scroll(function () {
var topMargin = ($(window).height() - $('#popup').height())/2 + $(window).scrollTop();
$('#popup').css('margin-top', topMargin);
});
});
</script>

    </body>
</html>